<template>
  <div id="app">
    <webview class="webview" id="foo" :src="zentaoConfig.url" style="display:inline-flex; width:100%; height:780px"></webview>
  </div>
</template>

<script>
import { BrowserWindow, screen } from'electron';

  export default {
    name: 'zentao',
    components:{
      BrowserWindow,screen
    },
    data: function() {
      return {
        zentaoConfig: {}
      }
    },
    methods: {
      operateWebview(){
        this.$nextTick(function(){
          let me = this
          // 选择页面中的webview元素
          const webview = document.querySelector('#foo')
          // 监听webview的加载状态
          webview.addEventListener('did-stop-loading', () => {
            webview.executeJavaScript(`
              const password=	document.getElementsByName("password")[0];
              const username = document.querySelector('#account')
              const submit = document.querySelector('#submit')
              username.value = "${me.zentaoConfig.username}"
              password.value = "${me.zentaoConfig.password}"
              submit.click()
            `)})
        })
      },
      async getZentaoConfig() {
        let res = await this.$http.get('/api/zentao/getConfig')
        this.zentaoConfig = res.data
      }
    },
    mounted(){
      this.getZentaoConfig()
      this.operateWebview()
    }
  }
</script>

<style>
  /* CSS */
</style>
